paint()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

paint()CSS関数で、 PaintWorklet で生成された <image> の値を定義します。

構文

css
paint(workletName, parameters)

凡例

workletName

登録された Worklet の名前です。

parameters

PaintWorklet へ渡される省略可能な追加の引数です。

基本的な使用例

CSS の paint() 関数で追加の引数を渡すことができます。この例では、 2 つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。

css
li {
  --boxColor: hsla(55, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --boxColor: hsla(155, 90%, 60%, 1);
  background-image: paint(hollowHighlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --boxColor: hsla(255, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 1px);
}

boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。

仕様書

Specification
CSS Painting API Level 1
# paint-notation

ブラウザーの互換性

BCD tables only load in the browser

関連情報